{extend name="../admin/common/base" /}
{block name="body"}
{CSS href="__STATIC__/sortable/sortable.min.css" /}
{js href='__STATIC__/sortable/sortable.min.js' /}

<div style="padding: 0px 10px 0px 10px">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li {eq name="from_type" value="0"}class="layui-this"{/eq}><a href="{:url('mp/Material/index',['type'=>'image','from_type'=>0])}">本地素材</a></li>
            <li {eq name="from_type" value="1"}class="layui-this"{/eq}><a href="{:url('mp/Material/index',['type'=>'image','from_type'=>1])}"> 微信服务器</a></li>
            <li ><a href="{:url('mp/Material/sendRecord')}"> 群发记录</a></li>
        </ul>
    </div>

</div>
<div class="layui-tab-content">
    {if condition="$from_type == 1"}
    <div class="layui-btn-group" style=" margin-bottom: 5px;">
        <button onclick="sycMaterial('image')" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#x1002;</i>同步图片</button>
        <button onclick="sycMaterial('news')" class="layui-btn  layui-btn-sm "><i class="layui-icon">&#x1002;</i>同步图文</button>
        <button onclick="sycMaterial('voice')" class="layui-btn layui-btn-normal layui-btn-sm "><i class="layui-icon">&#x1002;</i>同步语音</button>
        <button onclick="sycMaterial('video')" class="layui-btn layui-btn-warm layui-btn-sm"><i class="layui-icon">&#x1002;</i>同步视频</button>
    </div>
    {else/}
    <form action="" class="layui-form" method="get">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">标题：</label>
                <div class="layui-input-block">
                    <input type="text" name="keyword" value="{$keyword}" placeholder="请输入标题" autocomplete="off" class="layui-input" style="width: 400px;">
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal">
                        <i class="layui-icon">&#xe615;</i>
                        搜索</button>
                </div>
            </div>
        </div>
    </form>
    <a href="{:url(\'addMaterial\')}" target="_blank" class="layui-btn layui-btn-danger layui-btn-sm" style="float: right;position: relative;z-index: 10">+ 增加素材</a>
    {/if}
    {if condition="$type == 'news'"}
    <button onclick="combineNews()" class="layui-btn layui-btn-normal layui-btn-sm" style="float: right;margin-right: 10px;position: relative;z-index: 10"> 合并图文</button>
    {/if}

    <div class="layui-tab-item layui-show">

    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li {eq name="type" value="image"}class="layui-this"{/eq}><a href="{:url('mp/Material/index',['type'=>'image','from_type'=>$from_type])}">图片</a></li>
            <li {eq name="type" value="news"}class="layui-this"{/eq}><a href="{:url('mp/Material/index',['type'=>'news','from_type'=>$from_type])}">图文</a></li>
            <li {eq name="type" value="voice"}class="layui-this"{/eq}><a href="{:url('mp/Material/index',['type'=>'voice','from_type'=>$from_type])}">语音</a></li>
            <li {eq name="type" value="video"}class="layui-this"{/eq}><a href="{:url('mp/Material/index',['type'=>'video','from_type'=>$from_type])}">视频</a></li>
            {eq name="from_type" value="0"}
            <li {eq name="type" value="activity"}class="layui-this"{/eq}><a href="{:url('mp/Material/index',['type'=>'activity','from_type'=>$from_type])}">活动</a></li>
            <li {eq name="type" value="text"}class="layui-this"{/eq}><a href="{:url('mp/Material/index',['type'=>'text','from_type'=>$from_type])}">文本</a></li>
            {/eq}
        </ul>


            <div class="layui-tab-content">
            {switch name="type"}
            {case value="news"}
            <ul class="sortable__nav nav" style="display: none;">
                <li>
                    <a data-sjslink="all" class="nav__link">
                        All
                    </a>
                </li>

            </ul>
            <div id="sortable" class="sjs-default">
                {volist name="data" id="val"}
                <div data-sjsel="flatty" class="">
                    <div class="sort-card media-news-body" style="margin: 0;">
                        <div class="media-news-time">
                            发布时间：{$val.create_time}
                        </div>
                        <span style="display: block;" >
                                    {volist name="val.news_item" id="item" offset="0" length="1"}
                                    <div class="media-news-content" >
                                        <div class="media-news-desc"><p
                                                class="media-news-desc-sp"><input type="checkbox" name="select-news" value="{$item.id}"  > {$item.title}</p></div>
                                        <img class="media-news-img"
                                             src="{$item.thumb_url}" alt="">

                                    </div>
                                     {/volist}
                                </span>
                        <div>
                            <ul>
                                {volist name="val.news_item" id="item" offset="1" length="10"}
                                <li>
                                    <div class="mdedia-news-lists-box">
                                        <div class="media-news-title-box layui-col-md9">
                                            <input type="checkbox" name="select-news"  value="{$item.id}" > {$item.title}
                                        </div>
                                        <div class="media-news-img-box layui-col-md3"><img class="media-news-lists-img" src="{$item.thumb_url}" alt="">
                                        </div>
                                    </div>

                                </li>
                                {/volist}
                            </ul>
                        </div>
                        <div class="media-news-item-type2">
                            <div class="layui-btn-group media-news-btn">
                                {eq name="from_type" value="0"}
                                <button onclick="sendMaterial('{$val.id}','news')" class="layui-btn layui-btn-primary layui-btn-sm" style="padding: 0 5px;" >
                                    <i class="layui-icon">&#xe609;</i>
                                    群发
                                </button>
                                <button onclick="Preview('{$val.id}','news')" class="layui-btn layui-btn-primary layui-btn-sm" style="padding: 0 5px;">
                                    <i class="layui-icon">&#xe610;</i>
                                    预览
                                </button>

                                <button onclick="uploadNews('{$val.id}','news')" class="layui-btn layui-btn-primary layui-btn-sm" style="padding: 0 5px;">
                                    <i class="layui-icon">&#xe62f;</i>
                                    上传
                                </button>

                                <a class="layui-btn layui-btn-primary layui-btn-sm" href="{:url('editNews',['news_id'=>$val.id])}"  style="padding: 0 5px;">
                                    <i class="layui-icon">&#xe642;</i>
                                    编辑
                                </a>

                                <button onclick="delMaterial('{$val.id}','news')"  class="layui-btn layui-btn-primary layui-btn-sm" style="padding: 0 5px;">
                                    <i class="layui-icon">&#xe640;</i>删除
                                </button>
                                {/eq}
                                {eq name="from_type" value="1"}
                                <button onclick="sendMaterial('{$val.id}','news')" class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe609;</i>
                                    群发
                                </button>
                                <button onclick="Preview('{$val.id}','news')" class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe610;</i>
                                    预览
                                </button>

                                <a class="layui-btn layui-btn-primary layui-btn-sm" href="{:url('editNews',['news_id'=>$val.id])}" >
                                    <i class="layui-icon">&#xe642;</i>
                                    编辑
                                </a>

                                <button onclick="delMaterial('{$val.id}','news')"  class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe640;</i>删除
                                </button>
                                {/eq}
                            </div>
                        </div>
                    </div>
                </div>
                {/volist}
            </div>


            {$page|raw}
            {/case}
            {case value="activity"}
            <div class="layui-tab-item  layui-show">
                <div class="layui-row">
                    {volist name="data" id="val"}
                    <div class="layui-col-md4 rhaphp-media-news">
                        <div class="media-news-body">
                            <div class="media-news-time">
                                发布时间：{$val.create_time}
                            </div>
                            <span style="display: block;">

                                    <div class="media-news-content">
                                        <div class="media-news-desc"><p
                                                class="media-news-desc-sp">{$val.title}</p></div>
                                        <img class="media-news-img"
                                             src="{$val.url}">
                                    </div>

                                </span>
                            <div>
                            </div>
                            <div class="media-news-item-type2">
                                <div class="layui-btn-group media-news-btn">
                                <a class="layui-btn layui-btn-primary layui-btn-sm" href="{:url('editNews',['news_id'=>$val.id])}" >
                                    <i class="layui-icon">&#xe642;</i>
                                    编辑
                                </a>
                                {eq name="from_type" value="0"}
                                <button onclick="delMaterial('{$val.id}','activity')"  class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe640;</i>删除
                                </button>
                                {/eq}
                                </div>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
            {$data->render()|raw}
            {/case}
                {case value="text"}
                <div class="layui-tab-item  layui-show">
                    <div class="layui-row">
                        {volist name="data" id="val"}
                        <div class="layui-col-md4 rhaphp-media-news">
                            <div class="media-news-body">
                                <div class="media-news-time">
                                    发布时间：{$val.create_time}
                                </div>
                                <div style="height: 60px;overflow: auto;">
                                    {$val.content}
                                </div>

                                <div class="media-news-item-type2">
                                    <div class="layui-btn-group media-news-btn">
                                        <button onclick="sendMaterial('{$val.id}','text')" class="layui-btn layui-btn-primary layui-btn-sm">
                                            <i class="layui-icon">&#xe609;</i>
                                            群发
                                        </button>
                                        <button onclick="Preview('{$val.id}','text')" class="layui-btn layui-btn-primary layui-btn-sm">
                                            <i class="layui-icon">&#xe610;</i>
                                            预览
                                        </button>
                                        <a class="layui-btn layui-btn-primary layui-btn-sm" href="{:url('editNews',['news_id'=>$val.id])}" >
                                            <i class="layui-icon">&#xe642;</i>
                                            编辑
                                        </a>
                                        {eq name="from_type" value="0"}
                                        <button onclick="delMaterial('{$val.id}','text')"  class="layui-btn layui-btn-primary layui-btn-sm">
                                            <i class="layui-icon">&#xe640;</i>删除
                                        </button>
                                        {/eq}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/volist}
                    </div>
                </div>
                {$data->render()|raw}
                {/case}
            {case value="voice"}
            <table class="layui-table" lay-skin="line">
                <thead>
                <tr>
                    <th>语音名称</th>
                    <th>媒体 ID</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {volist name="data" id="vo"}
                <tr>
                    <td>{$vo.title}</td>
                    <td>{$vo.id}</td>
                    <td>{$vo.create_time}</td>
                    <td>
                        <div class="">
                            {eq name="from_type" value="0"}
                            <a class="layui-btn layui-btn-xs layui-btn-primary"  href="{:url('editMaterial',['id'=>$vo.id])}" >
                                <i class="layui-icon">&#xe642;</i>
                                编辑
                            </a>
                            {/eq}
                            <button onclick="delMaterial('{$vo.id}','voice')" class="layui-btn layui-btn-xs layui-btn-danger">
                                <i class="layui-icon">&#xe640;删除</i>
                            </button>
                        </div>

                    </td>
                </tr>
                {/volist}
                </tbody>
            </table>
            {$data->render()|raw}
            {/case}
            {case value="image"}
            <ul class="type_image">
                {volist name="data" id="v"}
                <li class="material_li">
                    <span><img src="{$v.url}" width="169" height="169"></span>
                    <span>
                                <div class="layui-btn-group">

                                  <button onclick="sendMaterial('{$v.id}','image')" style="width: 50%" class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe609;</i>群发
                                  </button>

                                  <button onclick="delMaterial('{$v.id}','image')" style="width: 50%;" class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe640;</i>删除
                                  </button>
                                </div>
                            </span>
                </li>

                {/volist}
            </ul>
            {$data->render()|raw}
            {/case}
            {case value="video"}
            <table class="layui-table" lay-skin="line">
                <thead>
                <tr>
                    <th>视频名称</th>
                    <th>媒体 ID</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {volist name="data" id="vo"}
                <tr>
                    <td>{$vo.title}</td>
                    <td>{$vo.id}</td>
                    <td>{$vo.create_time}</td>
                    <td>
                        <div class="">
                            {eq name="from_type" value="0"}
                            <a class="layui-btn layui-btn-xs layui-btn-primary"  href="{:url('editMaterial',['id'=>$vo.id])}"  >
                                <i class="layui-icon">&#xe642;</i>
                                编辑
                            </a>
                            {/eq}
                            <button onclick="delMaterial('{$vo.id}','video')" class="layui-btn layui-btn-xs layui-btn-danger">
                                <i class="layui-icon">&#xe640;删除</i>
                            </button>
                        </div>

                    </td>
                </tr>
                {/volist}
                </tbody>
            </table>
            {$data->render()|raw}
            {/case}
            {/switch}
        </div>
    </div>

</div>

</div>
<script>
    function Preview(id,type) {
        layer.prompt({title: '请输入发送预览者微信号', formType: 0}, function(wxid, index){
            layer.close(index);
            var l_index=layer.load(1)
            $.post("{:url('newsPreview')}",{id:id,wxid:wxid,type:type,from_type:'{$from_type}'},function (res) {
                if(res.status==1){
                    layer.msg(res.msg);
                }else{
                    layer.alert(res.msg);
                }
                layer.close(l_index);
                return false;
            }).error(function (res) {
                layer.close(l_index);
                layer.alert('服务出错');
            })
        });
    }

    function combineNews() {
        var selected_news = $('input[name="select-news"]:checked');

        var  selected_ids = '';
        if(selected_news.length > 1){
            var selected_id_arr = [];
            selected_news.each(function () {
                selected_id_arr.push($(this).val());
            });

            selected_ids = selected_id_arr.join(',');


            $.post("{:url('mp/Material/combineNews')}",{'ids':selected_ids},function (res) {
                if(res.status==1){
                    layer.msg(res.msg,{time:1000},function () {
                        window.location.reload();
                    });
                }else{
                    layer.alert(res.msg)
                }
            })
        }else{
            layer.alert('请选择2个或以上图文');

        }
    }

    function uploadNews(id,type) {
        var l_index=layer.load(1);
        $.post("{:url('uploadMediaNews')}",{id:id,type:type,from_type:'{$from_type}'},function (res) {

            if(res.status==1){

                layer.msg(res.msg);
            }else{

                layer.alert(res.msg);
            }
            layer.close(l_index);
            return false;
        }).error(function (res) {
            layer.close(l_index);
            layer.alert('服务出错');
        })
    }

    function sendMaterial(id,type) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('你确定需要群发吗？认证号可用、订阅号一天1条，服务号一个月四条。', {
                btn: ['是','不'] //按钮
            }, function(){

                var loadIndex = layer.load(1);
                $.post("{:url('mp/Material/sendMaterial')}",{'id':id,'type':type,'from_type':'{$from_type}'},function (res) {
                    if(res.status==1){
                        layer.alert(res.msg);
                    }else{
                        layer.alert(res.msg);
                    }
                    layer.close(loadIndex);
                })
            }, function(){

            });
        });

    }
    function delMaterial(id,type) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('你确定需要删除吗？', {
                btn: ['是','不'] //按钮
            }, function(){
                $.post("{:url('mp/Material/delMaterial')}",{'id':id,'type':type,'from_type':'{$from_type}'},function (res) {
                    if(res.status==1){
                        layer.msg(res.msg,{time:1000},function () {
                            window.location.reload();
                        });
                    }else{
                        layer.alert(res.msg)
                    }
                })
            }, function(){

            });
        });

    }
    function sycMaterial(type) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                type: 2,
                title: '正在同步',
                shadeClose: true,
                shade: 0.5,
                area: ['680px', '200px'],
                content: '{:url("mp/Material/sycMaterial","","")}/type/'+type+'/offset/0',
                cancel: function(index, layero){
                    window.location.reload();
                }
            })
        });
    }

</script>
<script type="text/javascript">
    if(document.getElementById("sortable")){
        document.querySelector('#sortable').sortablejs()
    }

</script>

<style>
.content li.material_li{height:auto}
.content .type_image li{float:left;}
li.material_li .material_li_box .material_li_t{position: relative;}
li.material_li .material_li_box .material_li_t img{display: block;}
li.material_li .material_li_box .material_li_t p{color: #fff;position: absolute;background: rgba(0,0,0,0.7);bottom: 0px;left: 0px;right: 0px;padding: 4px;font-size: 12px;line-height: 16px;}
.type_image .layui-btn-group{width: 100%;}
.material_li_b{border-top: 1px solid #eee;padding-top: 4px;padding-bottom: 4px;}
.material_li_b img{float: right; margin: 5px;}
.material_li_b p{padding-left: 5px;font-size: 12px;}
</style>
{/block}